{{ define "css"}}
    <link href="https://cdn.bootcss.com/simplemde/1.11.2/simplemde.min.css" rel="stylesheet">
    <style type="text/css">
        body {background: #e5e5e5;}
        .card .card-content .content {
            font-size: 13px;
        }
        .card .card-content .content p {
            margin: 0.5rem 0rem;
        }
        /*解决光标错位的问题*/
        /*参考自：https://github.com/sparksuite/simplemde-markdown-editor/issues/595 */
        .CodeMirror pre{
            margin-bottom: 0em !important;
        }
    </style>
{{ end }}

{{define "content"}}
    <div class="container" style="padding: 2rem 0rem;">
        <div class="columns">
            <div class="column is-three-quarters">
                <div class="card">
                    <div class="card-content">
                        <div class="content">
                            <form id="app" method="POST" action="/topic/new" @submit.prevent="onSubmit">
                                <div class="field">
                                    <label class="label">标题</label>
                                    <div class="control">
                                        <input type="text" class="input" name="title" id="title" placeholder="请填写标题" v-model="form.title" required>
                                    </div>
                                </div>
                                <div class="field">
                                    <label class="label">分类</label>
                                    <div class="control">
                                        <div class="select">
                                            <select name="category_id" id="category_id" v-model="form.category_id">
                                                <option value="0">请选择</option>
                                                {{range .categories}}
                                                    <option value="{{.Id}}">{{.Name}}</option>
                                                {{end}}
                                            </select>
                                        </div>
                                    </div>
                                </div>
                                {{include "topic/tips"}}
                                <div class="field">
                                    <div class="control">
                                        <textarea id="editor" v-model="form.editor"></textarea>
                                    </div>
                                </div>
                                <div class="field">
                                    <div class="control">
{{/*                                        <button class="button is-link" type="submit" id="topic-submit">*/}}
{{/*                                            <i class="fas fa-eye"></i>&nbsp;预览主题*/}}
{{/*                                        </button>*/}}
                                        <button class="button is-link is-pulled-right" :disabled="form.errors.any()">
                                            <i class="fas fa-paper-plane"></i>&nbsp;发布主题
                                        </button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
            <div class="column">
                <div class="card">
                    <header class="card-header">
                        <p class="card-header-title">
                            发帖提示
                        </p>
                    </header>
                    <div class="card-content">
                        <div class="content is-small">
                            <ol type="1">
                                <li>
                                    <code>主题标题</code>
                                    <p>
                                        请在标题中描述内容要点。如果一件事情在标题的长度内就已经可以说清楚，那就没有必要写正文了。
                                    </p>
                                </li>
                                <li>
                                    <code>选择节点</code>
                                    <p>
                                        在最后，请为你的主题选择一个节点。恰当的归类会让你发布的信息更加有用。
                                    </p>
                                </li>
                                <li>
                                    <code>正文</code>
                                    <p>
                                        可以在正文中为你要发布的主题添加更多细节。1024课堂 支持
                                        <a href="https://help.github.com/articles/github-flavored-markdown" target="_blank">GitHub Flavored Markdown</a>
                                        文本标记语法。
                                    </p>
                                    <p>
                                        在正式提交之前，你可以点击本页面左下角的“预览主题”来查看 Markdown 正文的实际渲染效果。
                                    </p>
                                </li>
                            </ol>
                        </div>
                    </div>
                </div>
                <br>
                <div class="card">
                    <header class="card-header">
                        <p class="card-header-title">
                            社区指导原则
                        </p>
                    </header>
                    <div class="card-content">
                        <div class="content is-small">
                            <ol type="1">
                                <li>尊重原创: 请不要在 <code>1024课堂</code> 发布任何盗版下载链接，包括软件、音乐、电影等等。</li>
                                <li>友好互助: 保持对陌生人的友善。用知识去帮助别人。</li>
                            </ol>
                        </div>
                    </div>
                </div>
                <br>
            </div>
        </div>
    </div>
{{end}}}

{{define "js"}}
    {{include "topic/editor"}}
    <script type="text/javascript">
        var app = new Vue({
            el: '#app',
            data: {
                form: new Form({
                    title: '',
                    category_id: 0,
                    editor: '',
                    origin_body: ''
                }),
            },
            delimiters:['${', '}'],
            methods: {
                onSubmit() {
                    if (this.form.title === '') {
                        swal("请正确填写标题！", "","warning");
                        return false;
                    }
                    if (this.form.category_id === 0) {
                        swal("请选择正确的分类", "","warning");
                        return false;
                    }
                    this.form.editor = simplemde.value();
                    if (this.form.editor === '') {
                        swal("请正确填写topic内容！", "","warning");
                        return false;
                    }

                    this.form.category_id = parseInt(this.form.category_id);
                    this.form.origin_body = this.form.editor;

                    // post, default use json
                    this.form.post("/topic/new")
                        .then(response => {
                            if (response.code === 0) {
                                window.location.href = "/topics/" + response.data;
                            } else {
                                swal("发布失败！", "","error");
                            }
                        })
                        .catch(errors => {
                            console.log(errors);
                        });

                },
                // onSave: function (e) {
                //     e.preventDefault();
                //     if (this.title === '') {
                //         swal("请正确填写标题！", "","warning");
                //         return false;
                //     }
                //     if (this.category_id === 0) {
                //         swal("请选择正确的分类", "","warning");
                //         return false;
                //     }
                //     this.editor = $('#editor').val();
                //     if (this.editor === '') {
                //         swal("请正确填写topic内容！", "","warning");
                //         return false;
                //     }
                //
                //     var data = {
                //         "category_id": parseInt(this.category_id),
                //         "title": this.title,
                //         "origin_body": this.editor,
                //     };
                //     let config = {
                //         headers: {
                //             'Content-Type': 'application/json'
                //         }
                //     };
                //     this.$http.post("/topic/new", JSON.stringify(data), config).then((response) => {
                //         console.log(response);
                //         if (response.data.code === 0) {
                //             // http://mishengqiang.com/sweetalert/
                //             window.location.href = "/topics/" + response.data.data;
                //             return true;
                //         } else {
                //             swal("发布失败！", "","error");
                //             return false;
                //         }
                //     }).catch( error => {
                //         console.log(error);
                //     });
                // }
            }
        });
    </script>
{{end}}}